<template>
  <div>
    <input type="file" @change="Upload"/>

    <van-image
      :src=this.img
    />
npm
  </div>
</template>

<script>
export default {
  name: "Yolo_flask",

  data() {
    return {
      img: null,
    }
  },

  methods: {

    Upload(event) {
      const file = event.target.files[0];
      // 在这里进行一系列的校验
      console.log(file)
      const formData = new FormData();
      formData.append("image", file);
      this.axios.post('/upload_pic', formData, {
        headers: {
          // 表示上传的是文件,而不是普通的表单数据
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        // 上传成功后的处理
        // console.log(res)


        this.img ='data:image/jpg;base64,'+res.data.data.img_base64.replace(/[\r\n]/g,'')

      }).catch(error => {
        console.log(error)
      })
    },

    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);

      this.axios({
        method: "post",
        url: "http://192.168.1.10:5000/v1/object-detection/yolov5s",
        image: file
      }).then(resp => {
        if (resp) {
          // console.log(resp);
          // this.img = resp.data
        }
      })


    },


  },

}
</script>

<style scoped>

</style>
